$botton-height: 1.60rem;
$user-profile-top-size: .2rem;
$user-statistical-top-size: .28rem;
$border-gap-color: rgba(255, 255, 255, .1583);
$color-bg: #F9F9F9;
.box{
    // height: 100vh;
    // overflow-y: auto;
    // background-color: $color-danger;
    background-color: $color-bg;
    .top-hanlde-show{
        background-color: $color-primary;
        padding: .19rem .24rem .25rem .22rem;
        color: #fff;
        position: relative;
        z-index: 3000;
        position: fixed;
        width: 100%;
        height: .94rem;
        .user-name{
            font-size: .38rem;
            font-style: normal;
        }
        .left-i{
            font-size: .37rem;
        }
        .right-i{
            font-size: .32rem;
        }
    }
    .height-space{
        height: .94rem;
    }
    .user-profile-background{
        background-color: $color-primary;
        color: #fff;
        position: absolute;
        top: 2.5rem;
        width: 100%;
        height: 1.5rem;
    }
    .user-profile{
        background-color: $color-primary;
        padding: $user-profile-top-size .44rem .34rem .28rem;
        box-sizing: border-box;
        .user-inner{
            height: 1.28rem;
            width: 100%;
            .user-img{
                width: 1.28rem;
                height: 100%;
                border-radius: 50%;
                overflow: hidden;
                .user-img-ipc{
                    width: 100%;
                    height: 100%;
                    font-style: normal;
                    border: 2px solid rgba(0, 0, 0, 0.1);
                    box-sizing: border-box;
                    background: rgba(0 ,0, 0, .2);
                    border-width: 0px;
                }
            }
            .user-data-statistical{
                flex: auto;
                padding: $user-statistical-top-size .24rem;
                color: #fff;
                line-height: 0px;
                &>div{
                    &>p{
                        text-align: center;  
                        &:nth-child(1){
                            font-size: .28rem;
                            /*字体大小 + 间距 + 当前字体的一半*/
                            padding-bottom: .6rem;
                        }
                        &:nth-child(2){
                            font-size: .24rem;
                        }
                    }
                }
                .loading-layout{
                    p{
                        margin-top: .5em;
                        &:nth-child(1){
                            width: 2em;
                            height: 1em;
                            padding: 0px;
                            background-color: rgba(249, 249, 249, .3);
                            margin-left: .5em;
                        }
                        &:nth-child(2){
                            width: 3.5em;
                            height: 1em;
                            background-color:rgba(249, 249, 249, .3);
                        }
                    }
                }
            }
            .star-box{
                margin-top: $user-profile-top-size;
                margin-bottom: $user-profile-top-size;
                padding-left: .25rem;
                position: relative;
                width: .72rem;
                text-align: center;
                color: #fff;
                .iconfont{
                    font-size: .32rem;                    
                    margin-left: .18rem;
                }
                &::after{
                    content: "";
                    display: block;
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    width: 1px;
                    height: 100%;
                    background-color: $border-gap-color;
                }
                &>p{
                    position: absolute;
                    top: .5rem;
                    text-align: center;
                    width: .72rem;
                    font-size: .24rem;
                }
            }
            .star-box-active{
                color: rgb(255,180,90);
            }
        }
    }
    @supports (position: sticky){
        .tab-outside{
            position: sticky;
            top: 0.94rem;
        }
    }
    @supports not (position: sticky){
        .tab-outside{
            position: relative;
            top: 0px;
        }
    }
    .tab-outside{
        overflow: hidden;
        border-radius: .3rem .3rem 0px 0px;
        width: 100%;
        z-index: 9;
        .tab{
            width: 100%;
            background-color: $color-main-background;
            .item{
                width: 100%;
                text-align: center;
                position: relative;
                font-size: .28rem;
                line-height: 1rem;
            }
            .active{
                color: $color-primary;
                &::after{
                    content: "";
                    display: block;
                    position: absolute;
                    bottom: .16rem;
                    left: 0px;
                    right: 0px;
                    margin: auto;
                    height: .04rem;
                    width: .3rem;
                    border-radius: .02rem;
                    background-color: $color-primary;
                }
            }
        }
    }
    .gap-line{
        width: 100%;
        height:1px;
        background:rgba(229,229,229,1)
    }
    .show-inner{
        // flex: auto;
        // overflow: auto;    
        padding-bottom: $botton-height;        
        z-index: 2;
        position: relative;
    }
    
    .button-box{
        position: fixed;
        width: 100%;
        bottom: 0px;
        background-color: rgba(255,255,255,.79);
        height: $botton-height;
        box-shadow:0px 2px 8px 4px rgba(216,216,216,0.5);
        // opacity:0.7994;
        z-index: 9;
        .button{
            width: 7.02rem;
            height: .88rem;
            background:$color-primary;
            border-radius: .1rem;
            margin: auto;
            text-align: center;
            line-height: .88rem;
            color: #fff;
            font-size: .28rem;
            margin-top: .35rem;
        }
    }
    
    .xuqiuxiaoguo{
        position: fixed;
        width: 100%;
        bottom: 0px;
        height: 100%;
        left: 0px;
        z-index: 88;
        .mask{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.5);
        }
        .inner{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            .quxiulibiao{
                width: 5.66rem;
                background: #fff;
                .biaoti{
                    height: 1rem;
                    line-height: 1rem;
                    text-align: center;
                    color: $color-text-regular;
                    font-size: .26rem;
                    border-radius: 8px 8px 0px 0px;
                    background: #fff;     
                    border-bottom: 1px solid #DDDDDD;
                }
                .xuanxiang{
                    height: 1rem;
                    line-height: 1rem;
                    text-align: center;
                    font-size: .32rem;
                    color: #282828;
                    width: 5.66rem;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    border-bottom: 1px solid #DDDDDD;
                }
                .xuanzelequxiuxiaoguo{
                    color: $color-primary;
                }
                .bunengxuanzhexiaoguo{
                    color: #ccc;
                }
                .queding{
                    height: 1rem;
                    line-height: 1rem;
                    text-align: center;
                    font-size: .32rem;
                    color: $color-primary;
                    border-radius: 0px 0px 8px 8px;
                    background: #fff; 
                }
            }
        }
    }
}
// .personal_details{
//     background-color: $color-primary;
// }